<template>
  <div class="main">
    <div class="box" :style="widHei">
      <div
        class="box-svg"
        v-for="(item,index) in svgList"
        :key="index"
        :style="{left:(item.columnNum - 1) * 22 + 'px',top:(item.rowNum - 1) * 22 + 'px'}"
      >
        <!-- 全白 -->
        <div class="svg" v-if="!item.isBroken && !item.isOccupied" @click="handleClick(index)" :style="isClick === index ? {'background':'skyblue'} : ''">
          <svg viewBox="0 0 1024 1024">
            <path
              fill="#FFFFFF"
              d="M859.2 248h65c20.2 0 36.6 16.4 36.6 36.6v531c0 20.2-16.4 36.6-36.6 36.6h-46.5c-4.7 0-8.5 3.8-8.5 8.5v28.2c0 20.2-16.4 36.6-36.6 36.6H191.4c-20.2 0-36.6-16.4-36.6-36.6v-28.2c0-4.7-3.8-8.5-8.5-8.5H99.8c-20.2 0-36.6-16.4-36.6-36.6v-531c0-20.2 16.4-36.6 36.6-36.6h65v-84.7c0-37.4 30.3-67.8 67.8-67.8h559c37.4 0 67.8 30.3 67.8 67.8V248z"
            />
            <path
              d="M924.2 248c20.2 0 36.6 16.4 36.6 36.6v531c0 20.2-16.4 36.6-36.6 36.6h-46.5c-4.7 0-8.5 3.8-8.5 8.5v28.2c0 20.2-16.4 36.6-36.6 36.6H191.4c-20.2 0-36.6-16.4-36.6-36.6v-28.2c0-4.7-3.8-8.5-8.5-8.5H99.8c-20.2 0-36.6-16.4-36.6-36.6v-531c0-20.2 16.4-36.6 36.6-36.6h73.4v16.9H99.8c-10.9 0-19.7 8.8-19.7 19.7v531c0 10.9 8.8 19.7 19.7 19.7h46.5c14 0 25.4 11.4 25.4 25.4v28.2c0 10.9 8.8 19.7 19.7 19.7h641.2c10.9 0 19.7-8.8 19.7-19.7v-28.2c0-14 11.4-25.4 25.4-25.4h46.5c10.9 0 19.7-8.8 19.7-19.7v-531c0-10.9-8.8-19.7-19.7-19.7h-72.7V248h72.7z m0 0c20.2 0 36.6 16.4 36.6 36.6v531c0 20.2-16.4 36.6-36.6 36.6h-46.5c-4.7 0-8.5 3.8-8.5 8.5v28.2c0 20.2-16.4 36.6-36.6 36.6H191.4c-20.2 0-36.6-16.4-36.6-36.6v-28.2c0-4.7-3.8-8.5-8.5-8.5H99.8c-20.2 0-36.6-16.4-36.6-36.6v-531c0-20.2 16.4-36.6 36.6-36.6h73.4v16.9H99.8c-10.9 0-19.7 8.8-19.7 19.7v531c0 10.9 8.8 19.7 19.7 19.7h46.5c14 0 25.4 11.4 25.4 25.4v28.2c0 10.9 8.8 19.7 19.7 19.7h641.2c10.9 0 19.7-8.8 19.7-19.7v-28.2c0-14 11.4-25.4 25.4-25.4h46.5c10.9 0 19.7-8.8 19.7-19.7v-531c0-10.9-8.8-19.7-19.7-19.7h-72.7V248h72.7z"
              fill="#BDC0C5"
            />
            <path
              d="M232.5 112.5c-28.1 0-50.8 22.8-50.8 50.8v592.8c0 9.4 7.6 16.9 16.9 16.9h626.7c9.4 0 16.9-7.6 16.9-16.9V163.3c0-28.1-22.8-50.8-50.8-50.8H232.5z m0-17h559c37.4 0 67.8 30.3 67.8 67.8v592.8c0 18.7-15.2 33.9-33.9 33.9H198.7c-18.7 0-33.9-15.2-33.9-33.9V163.3c0-37.4 30.3-67.8 67.7-67.8z"
              fill="#BDC0C5"
            />
          </svg>
        </div>
        <!-- 锁住 -->
        <div class="svg" v-else-if="item.isBroken">
          <svg viewBox="0 0 1024 1024">
            <path
              fill="#DCDCDC"
              d="M859.8 252.5h64.9c20.2 0 36.6 16.3 36.6 36.4v528c0 20.1-16.4 36.4-36.6 36.4h-46.4c-4.7 0-8.5 3.8-8.5 8.4v28c0 20.1-16.4 36.4-36.6 36.4H193.1c-20.2 0-36.6-16.3-36.6-36.4v-28c0-4.7-3.8-8.4-8.5-8.4h-46.4C81.4 853.3 65 837 65 816.9v-528c0-20.1 16.4-36.4 36.6-36.4h64.9v-84.2c0-37.2 30.3-67.4 67.6-67.4h558.1c37.4 0 67.6 30.2 67.6 67.4v84.2z"
            />
            <path
              d="M924.7 252.5c20.2 0 36.6 16.3 36.6 36.4v528c0 20.1-16.4 36.4-36.6 36.4h-46.4c-4.7 0-8.5 3.8-8.5 8.4v28c0 20.1-16.4 36.4-36.6 36.4H193.1c-20.2 0-36.6-16.3-36.6-36.4v-28c0-4.7-3.8-8.4-8.5-8.4h-46.4C81.4 853.3 65 837 65 816.9v-528c0-20.1 16.4-36.4 36.6-36.4h73.3v16.8h-73.3c-10.9 0-19.7 8.8-19.7 19.6v528c0 10.8 8.8 19.6 19.7 19.6H148c14 0 25.4 11.3 25.4 25.3v28c0 10.8 8.8 19.6 19.7 19.6h640.2c10.9 0 19.7-8.8 19.7-19.6v-28c0-14 11.4-25.3 25.4-25.3h46.4c10.9 0 19.7-8.8 19.7-19.6v-528c0-10.8-8.8-19.6-19.7-19.6h-72.6v-16.8h72.5z m0 0c20.2 0 36.6 16.3 36.6 36.4v528c0 20.1-16.4 36.4-36.6 36.4h-46.4c-4.7 0-8.5 3.8-8.5 8.4v28c0 20.1-16.4 36.4-36.6 36.4H193.1c-20.2 0-36.6-16.3-36.6-36.4v-28c0-4.7-3.8-8.4-8.5-8.4h-46.4C81.4 853.3 65 837 65 816.9v-528c0-20.1 16.4-36.4 36.6-36.4h73.3v16.8h-73.3c-10.9 0-19.7 8.8-19.7 19.6v528c0 10.8 8.8 19.6 19.7 19.6H148c14 0 25.4 11.3 25.4 25.3v28c0 10.8 8.8 19.6 19.7 19.6h640.2c10.9 0 19.7-8.8 19.7-19.6v-28c0-14 11.4-25.3 25.4-25.3h46.4c10.9 0 19.7-8.8 19.7-19.6v-528c0-10.8-8.8-19.6-19.7-19.6h-72.6v-16.8h72.5z"
              fill="#BDC0C5"
            />
            <path
              d="M234.1 117.7c-28 0-50.7 22.6-50.7 50.5v589.4c0 9.3 7.6 16.8 16.9 16.8H826c9.3 0 16.9-7.5 16.9-16.8V168.3c0-27.9-22.7-50.5-50.7-50.5H234.1z m0-16.8h558.1c37.4 0 67.6 30.2 67.6 67.4v589.4c0 18.6-15.1 33.7-33.8 33.7H200.3c-18.7 0-33.8-15.1-33.8-33.7V168.3c0-37.2 30.3-67.4 67.6-67.4z"
              fill="#BDC0C5"
            />
            <path
              d="M648.9 477.7h-283V337.2c0-78 63.5-141.5 141.5-141.5s141.5 63.5 141.5 141.5v140.5zM413 430.6h188.7v-93.4c0-52-42.3-94.3-94.3-94.3s-94.3 42.3-94.3 94.3v93.4z"
              fill="#FFFFFF"
            />
            <path
              d="M365.9 383.7h283c26.1 0 47.2 21.1 47.2 47.2v187.5c0 26.1-21.1 47.2-47.2 47.2h-283c-26.1 0-47.2-21.1-47.2-47.2V430.9c0-26.1 21.1-47.2 47.2-47.2z"
              fill="#FFFFFF"
            />
          </svg>
        </div>

        <!-- // 已被选 -->
        <div class="svg" v-else-if="item.isOccupied">
          <svg viewBox="0 0 1024 1024">
            <path
              fill="#FF5F16"
              d="M859.5 248.7h64.9c20.2 0 36.6 16.4 36.6 36.6V816c0 20.2-16.4 36.6-36.6 36.6H878c-4.7 0-8.5 3.8-8.5 8.5v28.1c0 20.2-16.4 36.6-36.6 36.6H192.1c-20.2 0-36.6-16.4-36.6-36.6v-28.1c0-4.7-3.8-8.5-8.5-8.5h-46.5c-20.2 0-36.6-16.4-36.6-36.6V285.3c0-20.2 16.4-36.6 36.6-36.6h64.9v-84.6c0-37.4 30.3-67.7 67.7-67.7h558.6c37.4 0 67.7 30.3 67.7 67.7v84.6z"
            />
            <path
              d="M924.5 248.7c20.2 0 36.6 16.4 36.6 36.6V816c0 20.2-16.4 36.6-36.6 36.6H878c-4.7 0-8.5 3.8-8.5 8.5v28.1c0 20.2-16.4 36.6-36.6 36.6H192.1c-20.2 0-36.6-16.4-36.6-36.6v-28.1c0-4.7-3.8-8.5-8.5-8.5h-46.5c-20.2 0-36.6-16.4-36.6-36.6V285.3c0-20.2 16.4-36.6 36.6-36.6h73.4v16.9h-73.4c-10.9 0-19.7 8.8-19.7 19.7V816c0 10.9 8.8 19.7 19.7 19.7H147c14 0 25.4 11.4 25.4 25.4v28.1c0 10.9 8.8 19.7 19.7 19.7h640.8c10.9 0 19.7-8.8 19.7-19.7v-28.1c0-14 11.4-25.4 25.4-25.4h46.5c10.9 0 19.7-8.8 19.7-19.7V285.3c0-10.9-8.8-19.7-19.7-19.7h-72.6v-16.9h72.6z m0 0c20.2 0 36.6 16.4 36.6 36.6V816c0 20.2-16.4 36.6-36.6 36.6H878c-4.7 0-8.5 3.8-8.5 8.5v28.1c0 20.2-16.4 36.6-36.6 36.6H192.1c-20.2 0-36.6-16.4-36.6-36.6v-28.1c0-4.7-3.8-8.5-8.5-8.5h-46.5c-20.2 0-36.6-16.4-36.6-36.6V285.3c0-20.2 16.4-36.6 36.6-36.6h73.4v16.9h-73.4c-10.9 0-19.7 8.8-19.7 19.7V816c0 10.9 8.8 19.7 19.7 19.7H147c14 0 25.4 11.4 25.4 25.4v28.1c0 10.9 8.8 19.7 19.7 19.7h640.8c10.9 0 19.7-8.8 19.7-19.7v-28.1c0-14 11.4-25.4 25.4-25.4h46.5c10.9 0 19.7-8.8 19.7-19.7V285.3c0-10.9-8.8-19.7-19.7-19.7h-72.6v-16.9h72.6z"
              fill="##E55513"
            />
            <path
              d="M233.2 113.3c-28 0-50.8 22.7-50.8 50.8v592.5c0 9.3 7.6 16.9 16.9 16.9h626.3c9.3 0 16.9-7.6 16.9-16.9V164.1c0-28-22.7-50.8-50.8-50.8H233.2z m0-16.9h558.6c37.4 0 67.7 30.3 67.7 67.7v592.5c0 18.7-15.2 33.9-33.9 33.9H199.3c-18.7 0-33.9-15.2-33.9-33.9V164.1c0.1-37.4 30.4-67.7 67.8-67.7z"
              fill="#E55513"
            />
            <path
              d="M511.9 483.3c-23.3 0-41.6 18.9-41.6 42.2V573c0 23.3 18.3 42.2 41.6 42.2s41.6-18.9 41.6-42.2v-47.5c0-23.3-18.3-42.2-41.6-42.2m178-35.2c-7.9-13.5-12.7-29.2-12.7-46 0-23.3 8.8-44.6 23.3-60.7 13.6-19.2 9.1-45.7-10-59.3-17.4-12.5-41-9.9-55.5 5.1-14.4 16.6-25.7 35.9-33 57 0 0.1 0 0.1-0.1 0.2-5.5 17.4-21.5 18.8-30.8 15.8h-0.1c-18.6-5.3-38.2-8.2-58.5-8.2-116.9 0-211.6 94.7-211.6 211.6 0 3.1 0.2 10.3 0.2 11 0.9 23.3 20.8 41.5 44.2 40.6 23.3-0.9 41.6-20.6 40.6-43.9 0-0.2-0.2-5.3-0.2-7.7 0-70 56.8-126.8 126.8-126.8s126.8 56.8 126.8 126.8c0 2.8-0.1 5.5-0.3 8.2-0.6 23.1 17.4 42.5 40.6 43.4 23.3 0.9 43.3-17.2 44.2-40.6 0-0.6 0.3-7.6 0.3-11 0-42.7-12.6-82.3-34.2-115.5"
              fill="#FFFFFF"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: ['id'],
  data () {
    return {
      rowNum: null,
      colNum: null,
      widHei: {
        width: '0vw',
        height: '0vw'
      },
      svgList: [],
      isClick: null
    }
  },
  methods: {
    handleClick (index) {
      if (this.isClick === index) {
        this.isClick = null
        this.$emit('myclick')
      } else {
        this.isClick = index
        this.$emit('myclick', 1)
      }
    }
  },
  mounted () {
    axios({
      url: `https://m.maizuo.com/gateway/?scheduleId=${this.id}&k=8427366`,
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1596878689132323647422468","bc":"110100"}',
        'X-Host': 'mall.film-ticket.seat.list'
      }
    }).then((res) => {
      console.log(res.data.data.seatingChart)
      const data = res.data.data.seatingChart
      this.rowNum = data.width
      this.colNum = data.height
      this.widHei = {
        width: this.rowNum * 22 + 'px',
        height: this.colNum * 22 + 'px'
      }
      this.svgList = data.seats
    })
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background:#F4F4F4;
  padding-bottom: 5.556vw;
}
.box {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  position: relative;
  margin-top:11.111vw;
}
.box-svg {
  position: absolute;
}
.svg {
  width: 5.556vw;
  height: 5.556vw;
  margin: 0.278vw;
}
</style>
